<template>
  <div id="header">
    <div class="head-one">
      <div class="menu fr">
        <div v-show="!isLogin">
          <div class="login fl">
            <router-link to="/login">
              <span>登录</span>
            </router-link>
          </div>
          <div class="registered fl">
            <router-link to="/registe">
              <span>注册</span>
            </router-link>
          </div>
        </div>
        <div v-show="isLogin">
          <div class="personal-center fl">
            <router-link to="/personal">
              <i class="first fl">
               <svg t="1588565441966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3817" width="16" height="16"><path d="M954.181818 795.927273c-55.854545-162.909091-172.218182-286.254545-314.181818-332.8 76.8-41.890909 128-123.345455 128-216.436364C768 111.709091 656.290909 0 518.981818 0c-137.309091 0-249.018182 111.709091-249.018182 249.018182 0 90.763636 48.872727 169.890909 121.018182 211.781818C246.690909 505.018182 125.672727 628.363636 69.818182 795.927273c-16.290909 51.2-9.309091 114.036364 23.272727 158.254545 30.254545 41.890909 76.8 69.818182 128 69.818182l390.981818 0c13.963636 0 27.927273-16.290909 27.927273-30.254545 0-13.963636-11.636364-30.254545-27.927273-30.254545L221.090909 963.490909c-32.581818 0-65.163636-16.290909-83.781818-44.218182-20.945455-30.254545-27.927273-69.818182-16.290909-104.727273 62.836364-190.836364 221.090909-318.836364 390.981818-318.836364S840.145455 623.709091 902.981818 814.545455c11.636364 34.909091 6.981818 74.472727-16.290909 104.727273-20.945455 27.927273-51.2 44.218182-83.781818 44.218182-13.963636 0-27.927273 11.636364-27.927273 27.927273 0 13.963636 11.636364 27.927273 27.927273 27.927273 51.2 0 97.745455-23.272727 128-65.163636C963.490909 905.309091 972.8 847.127273 954.181818 795.927273zM323.490909 249.018182c0-107.054545 88.436364-193.163636 195.490909-193.163636s195.490909 86.109091 195.490909 193.163636S626.036364 442.181818 518.981818 442.181818 323.490909 356.072727 323.490909 249.018182z" p-id="3818" fill="#e6e6e6"></path></svg>
              </i>
              <span>个人中心</span>
            </router-link>
          </div>
          <div class="shopping fl">
            <router-link to="/shopping">
              <i class="fl">
                <svg t="1588565466302" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4650" width="16" height="16"><path d="M235.097303 699.133018C247.384597 735.582848 286.382106 763.623932 324.772759 763.623932L861.658537 763.623932 880.429732 763.623932 885.649214 745.458146 1009.08775 315.845043C1021.388907 273.032339 993.187631 235.213675 949.051586 235.213675L424.585365 235.213675C410.791718 235.213675 399.609756 246.479262 399.609756 260.376068 399.609756 274.272875 410.791718 285.538462 424.585365 285.538462L949.051586 285.538462C959.924 285.538462 964.161052 291.220461 961.106394 301.851829L837.667859 731.464932 861.658537 713.299145 324.772759 713.299145C307.742153 713.299145 287.789837 698.952471 282.395194 682.949451L73.600164 63.566336C69.16437 50.407706 54.980454 43.363344 41.919502 47.832313 28.858551 52.301281 21.86648 66.591273 26.302275 79.749903L235.097303 699.133018ZM399.609756 902.017094C399.609756 846.429871 354.881911 801.367522 299.707317 801.367522 244.532723 801.367522 199.804878 846.429871 199.804878 902.017094 199.804878 957.604318 244.532723 1002.666667 299.707317 1002.666667 354.881911 1002.666667 399.609756 957.604318 399.609756 902.017094ZM249.756098 902.017094C249.756098 874.223482 272.120021 851.692307 299.707317 851.692307 327.294613 851.692307 349.658537 874.223482 349.658537 902.017094 349.658537 929.810705 327.294613 952.341879 299.707317 952.341879 272.120021 952.341879 249.756098 929.810705 249.756098 902.017094ZM924.097562 902.017094C924.097562 846.429871 879.369715 801.367522 824.195121 801.367522 769.020529 801.367522 724.292683 846.429871 724.292683 902.017094 724.292683 957.604318 769.020529 1002.666667 824.195121 1002.666667 879.369715 1002.666667 924.097562 957.604318 924.097562 902.017094ZM774.243902 902.017094C774.243902 874.223482 796.607825 851.692307 824.195121 851.692307 851.782419 851.692307 874.146342 874.223482 874.146342 902.017094 874.146342 929.810705 851.782419 952.341879 824.195121 952.341879 796.607825 952.341879 774.243902 929.810705 774.243902 902.017094Z" p-id="4651" fill="#ffffff"></path></svg>
              </i>
              <span>购物车</span>
            </router-link>
          </div>
          <div class="message fl">
            <router-link to="/newmessage">
              <i class="fl">
              <svg t="1588565337797" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3040" width="16" height="16"><path d="M304 464m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="3041" fill="#ffffff"></path><path d="M752 464m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="3042" fill="#ffffff"></path><path d="M528 464m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="3043" fill="#ffffff"></path><path d="M512 64C265.6 64 64 243.2 64 460.8c0 115.2 57.6 224 156.8 300.8V928c0 12.8 6.4 22.4 16 28.8 3.2 3.2 9.6 3.2 16 3.2s12.8 0 16-3.2l172.8-105.6c25.6 3.2 48 6.4 70.4 6.4 246.4 0 448-179.2 448-396.8S758.4 64 512 64z m0 729.6c-22.4 0-48-3.2-73.6-6.4-6.4 0-16 0-22.4 3.2l-134.4 80v-128c0-9.6-6.4-19.2-12.8-25.6-89.6-64-140.8-156.8-140.8-259.2C128 278.4 300.8 128 512 128s384 150.4 384 332.8-172.8 332.8-384 332.8z" p-id="3044" fill="#ffffff"></path></svg>
              </i>
              <!-- <span>消息</span> -->
              <div class="font fl" >
                <el-badge :is-dot="newMsg" class="item">消息</el-badge>
              </div>
              </router-link>
          </div>
          <div class="message fl" v-if="isAdmin">
            <i class="fl">
              <svg t="1588571696124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5988" width="16" height="16"><path d="M512 568.888889c-159.288889 0-284.444444-125.155556-284.444444-284.444445s125.155556-284.444444 284.444444-284.444444 284.444444 125.155556 284.444444 284.444444-125.155556 284.444444-284.444444 284.444445z m0-56.888889c125.155556 0 227.555556-102.4 227.555556-227.555556s-102.4-227.555556-227.555556-227.555555-227.555556 102.4-227.555556 227.555555 102.4 227.555556 227.555556 227.555556zM824.888889 1024c-79.644444 0-142.222222-62.577778-142.222222-142.222222s62.577778-142.222222 142.222222-142.222222 142.222222 62.577778 142.222222 142.222222-62.577778 142.222222-142.222222 142.222222z m0-56.888889c45.511111 0 85.333333-39.822222 85.333333-85.333333s-39.822222-85.333333-85.333333-85.333334-85.333333 39.822222-85.333333 85.333334 39.822222 85.333333 85.333333 85.333333z" fill="#ffffff" p-id="5989"></path><path d="M796.444444 455.111111h56.888889v284.444445h-56.888889zM853.333333 455.111111h113.777778v56.888889h-113.777778zM853.333333 568.888889h113.777778v56.888889h-113.777778z" fill="#ffffff" p-id="5990"></path><path d="M512 512l-51.2 62.577778C261.688889 597.333333 113.777778 762.311111 113.777778 967.111111H56.888889v-56.888889h5.688889c28.444444-221.866667 216.177778-398.222222 449.422222-398.222222z m0 0l-51.2 62.577778C261.688889 597.333333 113.777778 762.311111 113.777778 967.111111H56.888889v-56.888889h5.688889c28.444444-221.866667 216.177778-398.222222 449.422222-398.222222z" fill="#ffffff" p-id="5991"></path></svg>
            </i>
            <!-- <span>消息</span> -->
            <div class="font fl" @click="admin">
              <el-badge class="item">管理员</el-badge>
            </div>
          </div>
          <div class="message fl">
            <i class="fl">
              <svg t="1588565255568" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2132" width="16" height="16"><path d="M298.666667 256a42.666667 42.666667 0 0 0 0-85.333333H213.333333a42.666667 42.666667 0 0 0-42.666666 42.666666v597.333334a42.666667 42.666667 0 0 0 42.666666 42.666666h85.333334a42.666667 42.666667 0 0 0 0-85.333333H256V256zM888.32 487.253333l-120.32-170.666666a42.666667 42.666667 0 0 0-59.306667-10.24 42.666667 42.666667 0 0 0-10.24 59.733333L771.84 469.333333H426.666667a42.666667 42.666667 0 0 0 0 85.333334h341.333333l-76.8 102.4a42.666667 42.666667 0 0 0 8.533333 59.733333 42.666667 42.666667 0 0 0 25.6 8.533333 42.666667 42.666667 0 0 0 34.133334-17.066666l128-170.666667a42.666667 42.666667 0 0 0 0.853333-50.346667z" p-id="2133" fill="#ffffff"></path></svg>
            </i>
            <!-- <span>消息</span> -->
            <div class="font fl" @click="logout">
              <el-badge class="item">登出</el-badge>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="head-two">
      <div class="search-bar">
        <img class="logo" src="../../assets/img/logo2.png" @click="goto()" />
        <ul class="tab-list">
          <li class="tab-item" @click="goto()">首&nbsp;&nbsp;&nbsp;&nbsp;页</li>
          <li class="tab-item">明星商品</li>
        </ul>
        <!-- <span class="search search-button" id="test">搜索一下</span> -->
        <span class="search">
          <input class="search-input" v-model="input" placeholder="亲！搜个什么吧！" type="email" />
          <a @click="search()">
            <i class="el-icon-search"></i>
          </a>
        </span>
      </div>
    </div>
  </div>
</template>

<script scoped>
import axios from "../../api/axios";
export default {
  data() {
    return {
      isLogin: false,
      newMsg: false,
      input:null,
      isAdmin:false
    };
  },
  created() {
    this.EventBus.$on("isLogin", (status, msg,isAdmin) => {
      this.isLogin = status;
      this.newMsg = msg;
      this.isAdmin = isAdmin
    });
  },
  methods: {
    goto() {
      this.$router.push("/");
    },
    logout() {
      axios.get("/user/loginout").then(resp => {
        if (resp.code == 0) {
          this.$message.success(resp.msg);
          this.$router.push("/");
          this.isLogin = false;
        }
      });
    },
    search(){
      this.$router.push({
        name:"List",
        query:{
          keyword:this.input
        }
      })
      location.reload()
    },
    admin(){
      this.axios.post("/user/admin").then(resp=>{
        if(resp.code ==0){
            window.open(resp.data.location)
        }
      })
    }
  }
};
</script>

<style scoped>
a {
  display: block;
}
#header {
  width: 100%;
  height: 135px;
  overflow: hidden;
  padding-bottom: 1px solid #8a8a8a;
}
.head-one {
  height: 30%;
  /* width: 100%; */
  background-color: rgb(80, 80, 80);
}

.head-one .menu {
  height: 100%;
  /* width: 1080px; */
  margin-right: 15%;
  /* background-color: aliceblue; */
}

.login,
.registered,
.personal-center,
.shopping,
.message {
  height: 100%;
  width: 100px;
}

/* .login span,
.registered span,
.personal-center span,
.shopping span,
.message span {
  display: block;
  color: #d6d6d6;
  text-align: center;
  margin: 0 auto;
  margin-top: 15%;
} */

.login:hover,
.registered:hover,
.personal-center:hover,
.shopping:hover,
.message:hover {
  background-color: #d6d6d6;
  text-decoration: none;
  color: #ececec;
  cursor: pointer;
}
.login:hover span,
.registered:hover span,
.personal-center:hover span,
.shopping:hover span,
.message:hover span {
  color: #fff;
}

.login span,
.registered span,
.personal-center span,
.shopping span,
.message span,
.message .font {
  color: #ececec;
  font-size: 16px;
  display: block;
  width: 100%;
  text-align: center;
  /* float: left; */
  line-height: 41px;
}
.message .font {
  width: 50%;
}
.el-badge__content.is-fixed.is-dot {
  right: 0px;
}
.message .font .el-badge {
  top: -2px;
  font-size: 16px;
  line-height: 25px;
}

.personal-center i,
.shopping i,
.message i {
  display: block;
  height: 15px;
  width: 15px;
}
.personal-center i img,
.shopping i img,
.message i img {
  height: 100%;
  width: 100%;
}
.personal-center i,
.shopping i,
.message i {
  margin-top: 11%;
  margin-left: 18%;
}
.personal-center .first {
  margin-left: 0;
}

/* .login a:hover span,
.registered a:hover span,
.personal-center a:hover span,
.shopping a:hover span,
.message a:hover span,
.message a:hover .el-icon-bell {
  color: #171818;
} */

.head-two {
  padding-top: 20px;
  /* margin-bottom: 5px; */
  height: 66px;
  /* position: relative; */
}
.search-bar {
  width: 1080px;
  height: 60px;
  margin: 8px auto;
  /* background-color: blue; */
}
.search {
  float: right;
  margin-top: 17px;
  /* float: right; */
  margin-right: 0px;
  font-size: 15px;
}
.logo {
  float: left;
  height: 57px;
  width: 158px;
}
.tab-list {
  float: left;
  margin-left: 110px;
  margin-top: 7px;
  width: 420px;
}
.tab-item {
  float: left;
  margin-right: 32px;
  height: 51px;
  line-height: 57px;
  font-size: 20px;
  color: #666;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
  list-style: none;
}
.tab-item:hover {
  color: #29a3d6;
  cursor: pointer;
}
/* .search-button {
  line-height: 35px;
  text-align: center;
  background-color: #c0c0c0;
  width: 122px;
} */
.search-input {
  height: 30px;
  width: 250px;
  border-radius: 42px;
  border: 2px solid #29a3d6;
  padding-left: 15px;
  background: none;
  transition: 0.3s linear;
  outline: none;
  /* float: right; */
}
/* input:focus {
  width: 300px;
} */
input::-ms-input-placeholder {
  text-align: center;
}
input::-webkit-input-placeholder {
  text-align: center;
}
.search a {
  display: inline;
  border: none;
  outline: none;
  /* height: 42px;
  width: 42px; */
  cursor: pointer;
  position: relative;
  right: 38px;
  background: none;
}
.search a:before {
  font-family: FontAwesome;
  color: #845f3f;
}
#test:hover {
  color: white;
  background-color: rgb(121, 114, 114);
}
</style>
